<template>
  <div class="index">
    <div
      v-if="equipment == 'pc'"
      style="min-width: 1270px;font-family: 微软雅黑;     overflow: hidden;"
    >
      <!-- new_banner -->
      <div class="New_index_banner">
        <swiper ref="mySwiper" :options="swiperOption1">
          <swiper-slide v-for="(item, index) in imgArr" :key="index">
            <img :src="item.url" alt />
            <!-- <router-link :to="{name:item.router}"
            v-if="item.router != ''">了解更多>></router-link>-->
            <!-- <a :href="item.a"
            v-else>了解更多>></a>-->
          </swiper-slide>
          <div
            slot="button-prev"
            class="swiper-button-prev swiper_one_prev"
          ></div>
          <div
            slot="button-next"
            class="swiper-button-next swiper_one_next"
          ></div>
          <div class="swiper-pagination"></div>
        </swiper>
      </div>

      <!-- 小标签 -->
      <div class="New_index_notwo_box">
        <div class="New_index_notwo">
          <div v-for="(item, index) in NewNotwo" :key="index">
            <img :src="item.icon" alt />
            <div>{{ item.data }}</div>
            <div>{{ item.title }}</div>
          </div>
        </div>
      </div>

      <!-- 关于我们 -->
      <div class="New_index_about">
        <div class="New_index_nav_one">杭州忠讯科技有限公司</div>
        <div class="New_index_nav_content">一家新型的互联网开发与营销公司</div>
        <div class="New_index_about_img">
          <div class="New_index_about_img_flex_one">
            <img
              src="http://o6wndwjxn.qnssl.com/63f8f20180907160536158.png"
              alt
            />
            <!-- 线上教育与 -->
            <div class="New_index_about_Occlusion">
              杭州忠讯科技有限公司是一家专注为企业提供小程序研发、微信公众平台开发、互联网广告资源推广的新型网络信息化企业，为企业用户提供产品搭建、体系运营、简单实用的互联网工具，并配合我们的广告资源推广服务体系，帮助数百万企业用户有效地提升消费者体验和互联网营销核心竞争力。
              <!-- 杭州忠讯科技有限公司位于黑龙江省七台河市， -->
            </div>
          </div>
          <div class="New_index_about_img_flex_one_f">
            <div class="New_index_about_img_flex_two">
              <img
                src="http://o6wndwjxn.qnssl.com/662942018090716054270.png"
                alt
              />
              <div class="New_index_about_Occlusion">
                自2014年1月成立以来，已经打造了一个完整的互联网一体化的营销产业链圈结构，为企业通过互联网营销产品体系、渠道分发、用户转化等方案，致力于成为企业用户成长的完美助力器。
              </div>
            </div>
            <div class="New_index_about_img_flex_two_f">
              <div class="New_index_about_img_flex_thr">
                <img
                  src="http://o6wndwjxn.qnssl.com/d5b05201809071605483050.png"
                  alt
                />
                <div class="New_index_about_Occlusion">
                  目前，主要的产品包括解决方案与广告资源，解决方案包含小程序研发、微信公号开发、线上教育，广告资源推广包括朋友圈广告、互转APP广告、中天加盟网广告、中天信息网、中天同城小程序广告、中天音乐杂志广告、中天视频制作广告、公众号图文广告等。
                </div>
              </div>
              <div class="New_index_about_img_flex_thr_f">
                <img
                  src="http://o6wndwjxn.qnssl.com/e8630201809071605539170.png"
                  alt
                />
                <div class="New_index_about_Occlusion">
                  4年以来，先后在哈尔滨、肇源、伊春、鸡西、双鸭山、绥化、鹤岗、齐齐哈尔、牡丹江、佳木斯、长春等多个城市开设了分公司，目前现有员工180余名，核心城市站长达到了20000余名，已累计了3000000+客户案例，且辐射3000多座城市，辐射人群近八千余万微友，广告效应明显，销售网络庞大，同时也深耕于移动互联网技术开发领域，致力于协助企业运用数字技术驱动营销传播。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 服务项目 -->
      <div class="fuwu" style="min-width: 1270px">
        <div class="New_index_nav_one">服务项目</div>
        <div class="New_index_nav_two">解决方案</div>
        <div class="New_index_programme">
          <div class="New_index_programme_item">
            <div class="New_index_programme_item_box">
              <img :src="NewProgramme[0].img" alt />
              <div>
                <div>{{ NewProgramme[0].title }}</div>
                <div>{{ NewProgramme[0].content }}</div>
                <div>{{ NewProgramme[0].detailed }}</div>
                <!-- <router-link :to="{name:NewProgramme[0].router}"
                v-if="NewProgramme[0].router">了解详情</router-link>-->
                <!-- <a :href="NewProgramme[0].a"
                v-else>了解详情</a>-->
              </div>
            </div>
          </div>
        </div>
        <div class="New_index_programme" style="margin-top: 40px;">
          <div v-for="(item, index) in NewProgramme" :key="index">
            <div v-if="index > 0" class="New_index_programme_item">
              <div class="New_index_programme_item_box">
                <img :src="item.img" alt />
                <div>
                  <div>{{ item.title }}</div>
                  <div>{{ item.content }}</div>
                  <div>{{ item.detailed }}</div>
                  <!-- <router-link :to="{name:item.router}"
                  v-if="item.router">了解详情</router-link>-->
                  <!-- <a :href="item.a"
                  v-else>了解详情</a>-->
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="Nex_index_input_phone">
          <input type="text" placeholder="请输入您的手机号" />
          <!-- <router-link :to="{ name: 'register'}">免费试用</router-link> -->
        </div>

        <div class="New_index_nav_two">营销推广</div>
        <div style="overflow: hidden;background-color:#fafafa;">
          <ul
            style="list-style: none;width:62%;min-width: 1200px;height:580px;margin: 0 auto;padding: 0;max-width: 1270px;"
          >
            <li
              v-for="(item, index) in sArr"
              :key="index"
              style="float: left;margin-left: 5px;margin-top: 10px;width: 24%;height: 300px"
            >
              <el-row>
                <el-col :span="8" style="width: 100%;">
                  <el-card :body-style="{ padding: '0px' }" shadow="hover">
                    <img :src="item.url" class="image8" />
                    <div style="padding: 14px;">
                      <span>{{ item.name }}</span>
                      <div class="bottom clearfix">
                        <!--<time class="time"></time>-->
                        <!-- <router-link v-if="index!==2 && index!==3"
                                     :to="{name:item.rout,params:{height:item.height}}">
                          <el-button type="text"
                                     class="button"
                                     style="color: #aaaaaa">查看详情>></el-button>
                        </router-link>-->
                        <el-button
                          v-if="index === 2"
                          type="text"
                          class="button"
                          style="color: #aaaaaa"
                        >
                          <a
                            href="http://jiameng.ztwl1111.com"
                            style="color: #aaaaaa;text-decoration: none"
                            >查看详情>></a
                          >
                        </el-button>
                        <el-button
                          v-if="index === 3"
                          type="text"
                          class="button"
                          style="color: #aaaaaa"
                        >
                          <a
                            href="http://hrb.weiyouquan.com.cn"
                            style="color: #aaaaaa;text-decoration: none"
                            >查看详情>></a
                          >
                        </el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </li>
          </ul>
        </div>
      </div>

      <!-- 服务领域 -->
      <div
        class="lingyu"
        style="position: relative;min-width: 1270px;height: 770px;"
      >
        <div
          v-for="(item, index) in fuwuArr"
          v-show="item.show"
          :key="index"
          :style="{
            'background-image': 'url(' + item.url + ')',
            'background-repeat': 'no-repeat'
          }"
          class="li"
        ></div>
        <div
          style="color: white;width:100%;height:727px;padding-top: 40px;font-size: 32px;font-family: 微软雅黑;background: rgba(0,0,0,.3);position: absolute;top:2px"
        >
          <div class="New_index_nav_one color_white">服务领域</div>
          <div class="New_index_nav_content color_white">
            电商、零售、餐饮、外卖、本地生活、休闲娱乐，中天都有完整的解决方案
          </div>
          <div
            style="width: 100%;min-width:1200px;margin: 0 auto;position: relative"
          >
            <span
              style="display:block;width: 70%;height: 2px;background-color: white;margin: 183px auto 0"
            ></span>
            <ul class="xuan">
              <li v-for="(item, index) in fuwuArr" :key="index">
                <span
                  :class="item.show === true ? 'bei' : 'bei1'"
                  @click="qiehuan(index)"
                >
                  <h6>{{ item.name }}</h6>
                </span>
                <div v-show="item.show" class="New_index_service_box">
                  <div class="New_index_service_img">
                    <img :src="item.img1" alt />
                  </div>
                  <div class="New_index_service_img">
                    <img :src="item.img2" alt />
                  </div>
                  <div class="New_index_service_img">
                    <img :src="item.img3" alt />
                  </div>
                  <div class="New_index_service_img">
                    <img :src="item.img4" alt />
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 应用功能 -->
      <div class="New_index_function">
        <div class="New_index_nav_one">小程序应用功能</div>
        <div class="New_index_nav_content">
          智能小程序一键生成，多种应用场景内容丰富，各种功能组合，即用即可生成
        </div>
        <div class="New_index_function_box">
          <div v-for="(item, index) in NewFrogramme" :key="index">
            <img :src="item.image" alt />

            <div class="New_index_function_box_name">
              <div>{{ item.titel }}</div>
            </div>

            <div class="New_index_function_box_title">{{ item.titel }}</div>
            <span>{{ item.content }}</span>

            <div class="New_xiaochengxu">
              <div>{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 辐射范围 -->
      <div class="New_index_Range">
        <div class="New_index_nav_one">我们的辐射范围</div>
        <div class="New_index_nav_content">
          全国 20000+ 城市站长覆盖99%的城市
        </div>
        <img src="http://o6wndwjxn.qnssl.com/97419201810100908205064.png" alt />
        <div class="New_index_map_information">
          <div>
            20000+
            <span>城市站长</span>
          </div>
          <div>
            99%
            <span>城市覆盖</span>
          </div>
          <div>
            7X24h
            <span>优质服务</span>
          </div>
        </div>
      </div>

      <!-- 合伙人 -->
      <div class="New_index_Partner">
        <img
          src="http://o6wndwjxn.qnssl.com/ed84f201809071633507365.png"
          alt="img"
        />
        <div class="New_index_nav_one color_white">
          行业先锋大洗牌，中天全国城市站长招募
        </div>
        <div class="New_index_Partner_box" @click="NewPhoneClose">合作咨询</div>
      </div>

      <!-- 企业优势 -->
      <div class="New_index_advantage">
        <div class="New_index_nav_one">企业优势</div>
        <div class="New_index_nav_content">
          四大服务体系，量身为您打造专属小程序
        </div>
        <div class="New_index_advantage_box">
          <div class="New_index_advantage_item">
            <div class="New_index_advantage_text">
              <img
                src="http://o6wndwjxn.qnssl.com/7bacf201808111543397459.png"
                alt
              />
              <div>
                <div>产品定制化</div>
                <div>
                  为客户提供专业化的定制服务，并为客户量身定制高转化、多趣味、强互动的小程序及营销策略。
                </div>
              </div>
            </div>
            <div class="New_index_advantage_text">
              <img
                src="http://o6wndwjxn.qnssl.com/31618201808111552219747.png"
                alt
              />
              <div>
                <div>资源海量化</div>
                <div>
                  拥有海量广告资源，覆盖90%互联网用户，对接众多优质互联网资源与平台。
                </div>
              </div>
            </div>
          </div>
          <div class="New_index_advantage_item">
            <div class="New_index_advantage_text">
              <img
                src="http://o6wndwjxn.qnssl.com/c44fc201808111554174253.png"
                alt
              />
              <div>
                <div>团队优质化</div>
                <div>
                  拥有专业的技术开发团队，资深广告团队，包括策略制定、社会化营销等服务。
                </div>
              </div>
            </div>
            <div class="New_index_advantage_text">
              <img
                src="http://o6wndwjxn.qnssl.com/016ec201808111555308956.png"
                alt
              />
              <div>
                <div>服务闭环化</div>
                <div>
                  根据客户情况提供技术开发到营销推广整体闭环方案，形成闭环服务体系。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 服务商户 -->
      <div class="New_index_Time">
        <img
          src="http://o6wndwjxn.qnssl.com/6570f201809071633588350.png"
          alt="img"
        />
        <div class="New_index_Time_box">
          <div>
            为全国
            <span>{{ NewNumber }}</span> 商户
          </div>
          <div>提供365X24小时的优质服务</div>
        </div>
      </div>

      <!-- 合作品牌 -->
      <div class="New_index_cooperation">
        <div class="New_index_nav_one">合作品牌</div>
        <div class="New_index_cooperation_box">
          <div v-for="(item, index) in NewCooperation" :key="index">
            <img :src="item.image" alt="img" />
          </div>
        </div>
      </div>

      <!-- 动态咨询 -->
      <div class="New_index_Consultation">
        <div class="New_index_Consultation_box">
          <div>
            <div class="New_index_Consultation_title">中天动态</div>
            <img
              :src="'http://o6wndwjxn.qnssl.com/' + qiye.img"
              alt="img"
              @click="chakan1(qiye.id)"
            />
            <div v-for="(item, index) in qiye" :key="index">
              <div class="New_index_Consultation_list">
                <div>
                  <div
                    class="New_index_Consultation_text"
                    @click="chakan1(item.article_id)"
                  >
                    <div>{{ item.create_at }}</div>
                    <div>{{ item.title }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="New_index_Consultation_more" @click="chakan">更多+</div>
          </div>

          <div>
            <div class="New_index_Consultation_title">行业资讯</div>
            <img
              :src="'http://o6wndwjxn.qnssl.com/' + zixun.img"
              alt="img"
              @click="chakan2(zixun.id)"
            />
            <div v-for="(item, index) in zixun" :key="index">
              <div class="New_index_Consultation_list">
                <div>
                  <div
                    class="New_index_Consultation_text"
                    @click="chakan2(item.article_id)"
                  >
                    <div>{{ item.create_at }}</div>
                    <div>{{ item.title }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="New_index_Consultation_more" @click="gengguo">
              更多+
            </div>
          </div>
        </div>
      </div>

      <!-- 立即加入 -->
      <div class="New_index_join">
        <img
          src="http://o6wndwjxn.qnssl.com/3d1eb201809071634051393.png"
          alt="img"
        />
        <div>立即加入</div>
        <div>抢占移动互联网新机遇</div>
        <div @click="NewPhoneClose">了解更多</div>
      </div>

      <!-- 页尾小标签 -->
      <div class="New_index_sale">
        <div>
          <div class="New_index_sale_box">
            <div>7</div>
            <div>
              <div>x24小时</div>
              <div>售后服务</div>
            </div>
          </div>
          <div class="New_index_sale_box">
            <div>0</div>
            <div>
              <div>元</div>
              <div>免费服务</div>
            </div>
          </div>
          <div class="New_index_sale_box">
            <div>12</div>
            <div>
              <div>家</div>
              <div>直属分公司</div>
            </div>
          </div>
          <div class="New_index_sale_box">
            <div>180+</div>
            <div>
              <div>员工</div>
              <div>竭诚为您服务</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户表单提交 -->
      <!-- <form @submit.prevent="NewData">
        <div class="New_index_Popup"
             v-show="NewPopup">
          <div class="New_index_phone_Popup">
            <span class="New_index_phone_Popup_Close"
                  @click="NewPopupState()">×</span>
            <div class="New_index_phone_Popup_radio">
              <div class="Popup_title">单选</div>
              <span v-for="(item,i) in New_radio"
                    :key="i">
                <label :for="item.for"
                       @click="Newradio(i)">
                  <span :class="i == Newradioselect?'Newradioactive':''"></span>
                  <input type="radio"
                         :value="item.value"
                         name="form_type"
                         :id="item.for">{{item.title}}
                </label>
              </span>
            </div>
            <div class="New_index_phone_Popup_input">
              <label for="name">
                <div class="Popup_title">*姓名</div>
                <input type="text"
                       placeholder="姓名"
                       id="name"
                       name="name"
                       v-model="submit.name"
                       required="required">
              </label>
            </div>
            <div class="New_index_phone_Popup_input">
              <label for="phone">
                <div class="Popup_title">*手机</div>
                <input type="text"
                       placeholder="手机"
                       id="phone"
                       name="phone"
                       v-model="submit.phone"
                       required="required">
              </label>
            </div>
            <div class="New_index_phone_Popup_input">
              <label for="weixin">
                <div class="Popup_title">*微信号</div>
                <input type="text"
                       placeholder="微信号"
                       id="weixin"
                       name="weixin"
                       v-model="submit.weixin"
                       required="required">
              </label>
            </div>
            <div class="New_index_phone_Popup_submit">
              <input type="submit"
                     value="提交表单">
            </div>
          </div>
        </div>
      </form>-->

      <!-- 内部弹出 -->
      <div
        class="New_index_Eject_phone"
        :style="'top:' + NewPhone + 'vh;opacity:' + NewPhoneOp + ' ;'"
        @click="NewPhoneClose"
      >
        <div class="New_index_Eject_phone_box">
          <img
            src="http://o6wndwjxn.qnssl.com/67d0b20180910101604247.png"
            alt
          />
          400-038-5581
        </div>
      </div>

      <!-- 提交成功 -->
      <div
        class="New_index_input_success"
        :style="'top:' + Newsuccesstop + '%; opacity:' + Newsuccessopa + ';'"
      >
        提交成功
      </div>
    </div>
    <div v-else>
      <v-index></v-index>
    </div>
  </div>
</template>
<script>
// import index from "../router";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import axios from "axios";
import { indexWebData } from "./js/webdata";
export default {
  name: "Index",
  components: {
    "v-index": () => import("./component/mobile/mobile_index"),
    swiper,
    swiperSlide
  },
  props: {
    equipment: {
      type: String,
      default: "pc"
    }
  },
  data() {
    return {
      submit: {
        form_type: "0",
        name: "",
        phone: "",
        weixin: ""
      },
      Newsuccesstop: -10,
      Newsuccessopa: 0,
      NewPhone: "-100",
      NewPhoneOp: 0,
      NewNumber: 1000000,
      NewPopup: false,
      Newradioselect: 0,
      hei: "",
      rTime: 0.001,
      qiye: [],
      zixun: [],
      currentDate: new Date(),
      dialogVisible: false,
      New_radio: indexWebData.New_radio,
      NewNotwo: indexWebData.New_notwo,
      NewProgramme: indexWebData.New_programme,
      fuwuArr: indexWebData.fuwuArr,
      NewFrogramme: indexWebData.New_frogramme,
      imgArr: indexWebData.imgArr,
      anliArr: indexWebData.anliArr,
      sArr: indexWebData.sArr,
      NewCooperation: indexWebData.New_cooperation,
      swiperOption1: {
        notNextTick: true,
        autoplay: true,
        loop: true,
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        navigation: {
          nextEl: ".swiper_one_next",
          prevEl: ".swiper_one_prev"
        },
        mousewheelControl: true,
        observeParents: true,
        slidesPerView: 1,
        debugger: true
      }
    };
  },

  created: function() {
    this.$emit("publicfooter", true);
  },

  mounted() {
    axios
      .get("http://infoapi.ztwlxx.net/index/index/lista?cate=1&pageshow=4")
      .then(res => {
        // 教育
        res.data.data.list.splice(2, 1);
        this.qiye = res.data.data.list;
        this.qiye.id = res.data.data.list[0].article_id;
        this.qiye.img = res.data.data.list[0].cover[0];
      });
    axios
      .get("http://infoapi.ztwlxx.net/index/index/lista?cate=2&pageshow=4")
      .then(res => {
        // 教育
        res.data.data.list.splice(2, 1);
        this.zixun = res.data.data.list;
        this.zixun.id = res.data.data.list[0].article_id;
        this.zixun.img = res.data.data.list[0].cover[0];
      });
    this.hei = this.$route.params.height1;
    if (this.hei === 8300) {
      this.send(this.hei);
    }
    this.NewNumberF();
  },
  methods: {
    chakan1(index) {
      axios
        .get(
          "http://infoapi.ztwlxx.net/index/index/detaila?article_id=" + index
        )
        .then(res => {
          if (res.data.code === 200) {
            this.$router.push({
              path: "/wenzhang",
              name: "wenzhang",
              params: {
                wenzhang: res.data.data
              }
            });
          }
        });
    },
    chakan2(index) {
      axios
        .get(
          "http://infoapi.ztwlxx.net/index/index/detaila?article_id=" + index
        )
        .then(res => {
          if (res.data.code === 200) {
            this.$router.push({
              path: "/zixun",
              name: "zixun",
              params: {
                wenzhang: res.data.data
              }
            });
          }
        });
    },
    send(aa) {
      let that = this;
      let rTime = that.rTime;
      // 倒计时
      let interval = window.setInterval(() => {
        if (--that.rTime <= 0) {
          that.rTime = rTime;
          window.scrollTo(0, aa);
          window.clearInterval(interval);
        }
      }, 1);
    },
    gengguo() {
      this.$router.push({
        path: "/zixun",
        name: "zixun"
      });
    },
    chakan() {
      this.$router.push({
        path: "/wenzhang",
        name: "wenzhang"
      });
    },
    qiehuan(index) {
      for (let i = 0; i < this.fuwuArr.length; i++) {
        if (i !== index) {
          this.fuwuArr[i].show = false;
        } else {
          this.fuwuArr[i].show = true;
        }
      }
    },
    ztwlkf() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    Newradio(e) {
      this.Newradioselect = e;
      this.submit.form_type = e;
    },
    NewPopupState() {
      this.NewPopup = !this.NewPopup;
    },
    NewNumberF() {
      var that = this;
      var dsq = setInterval(function() {
        if (that.NewNumber < 3000000) {
          that.NewNumber += 4321;
          if (that.NewNumber > 3000000) {
            that.NewNumber = 3000000;
          }
        } else {
          clearInterval(dsq);
        }
      }, 1);
    },
    NewPhoneClose() {
      if (this.NewPhone === 0) {
        this.NewPhone = "-100";
        this.NewPhoneOp = 0;
      } else {
        this.NewPhone = 0;
        this.NewPhoneOp = 1;
      }
    },

    NewData() {
      var that = this;
      var formData = JSON.stringify(this.submit);
      axios.post("http://47.96.248.251:8001/", formData).then(res => {
        if (res.data.code === 200) {
          that.NewPopup = false;
          that.submit.form_type = "0";
          that.submit.name = "";
          that.submit.phone = "";
          that.submit.weixin = "";
          let number = 0;
          var successtime = setInterval(function() {
            number++;
            if (number < 20) {
              that.Newsuccesstop = 20;
              that.Newsuccessopa = 1;
            } else {
              clearInterval(successtime);
              that.Newsuccesstop = -10;
              that.Newsuccessopa = 0;
            }
          }, 100);
        }
      });
    }
  }
};
</script>
<style lang="css" src="../../assets/scss/website/index.css" scoped></style>
<style scoped lang="css">
.image8 {
  display: block;
  height: 160px;
  margin-top: -1px !important;
}
.lianxi {
  font-size: 30px;
  height: 160px;
  background-color: #fafafa;
  margin-top: -34px;
  text-align: center;
  line-height: 100px;
}
.guanyu {
  height: 640px;
}
.li {
  width: 100%;
  min-width: 1200px;
  height: 770px;
  background: center;
  background-size: 100% 100%;
}
.xuan {
  width: 70%;
  margin: 0 auto;
  list-style: none;
  display: flex;
  position: absolute;
  top: -3px;
  left: 17%;
}
.xuan li {
  width: 14%;
}
.xuan li span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}
.bei {
  background-color: red !important;
  color: red !important;
}
.bei1 {
  background-color: white !important;
  color: white !important;
}
h6 {
  font-size: 24px;
  font-weight: 100;
  width: 100px;
}
.xuan li:nth-child(1) span h6 {
  position: absolute;
  top: -100px;
  left: -44px;
}
.xuan li:nth-child(2) span h6 {
  position: absolute;
  top: 55px;
  left: -44px;
}
.xuan li:nth-child(3) span h6 {
  position: absolute;
  top: -100px;
  left: -44px;
}
.xuan li:nth-child(4) span h6 {
  position: absolute;
  top: 55px;
  left: -44px;
}
.xuan li:nth-child(5) span h6 {
  position: absolute;
  top: -100px;
  left: -44px;
}
.xuan li:nth-child(6) span h6 {
  position: absolute;
  top: 55px;
  left: -44px;
}
.xuan li:nth-child(7) span h6 {
  position: absolute;
  top: -100px;
  left: -44px;
}
.tel {
  position: absolute;
  top: 20%;
  left: 42%;
  text-align: center;
  height: 118px;
  width: 318px !important;
  border-radius: 6px !important;
  z-index: 99999999 !important;
  background: #ff7e00;
  line-height: 5px;
}
</style>
